<template>
  <div class="latter-centent" v-if="dialogVisible">
    <div class="latter-body">
      <div class="latter-header">
        <span class="latter-header-first"></span>
        <div class="latter-header-title">
          端口展示
        </div>
        <span class="latter-header-last"><i class="el-icon-close" @click="$emit('update:visible',false)"></i></span>
      </div>
      <div class="code-box-line"
           v-loading="loading"
           element-loading-text="加载中…"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(0, 0, 0, 0.6)">
        <!--        职工平台-->
        <div class="previewlogBody-outline" ref="qrcodeList">
          <div class="previewlogBody"
               v-for="(item, index) in qrcodeList" :key="index">
            <div class="applycode savebox" :id="item.id+index">
              <img src="@/assets/imageAdmin/applycode.jpg" alt="" class="saveimgBg">
              <div class="apply-code-title">
                <p class="title-top">{{item.title}}</p>
                <div class="title-body">
                  <p class="title-school title-list">
                    <span>所属学校：</span>
                    <span>{{ schooName }}</span>
                  </p>
                  <p class="title-area title-list">
                    <!--// 0全校 1特定年段 2特定班级-->
                    <span>可用范围：</span>
                    <span>{{item.range}}</span>
                  </p>
                </div>
                <div class="apply-code-img">
                  <!--            <img :src="codeQrcode" alt="">-->
                  <div :id="item.id"></div>
                </div>
                <p class="getcode">扫码进入</p>
              </div>
            </div>
            <div class="primaryBtn">
              <el-button type="primary" size="small" @click="getHtml2CanvasFn(item.id+index, item.title)">下载二维码</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import html2canvas from "html2canvas";
import {systemIndex} from '@/api/admin/system'
import qrcodeData from './qrcodeData.js'
export default {
  props: ['visible'],
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        let n = this
        this.$nextTick(() => {
          n.getQrcodeInfo()
        })
      }
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      schooName: '',
      loading: true,
      parentloading: true,
      teachUrl: '',
      parentUrl: '',
      newStudentloading: true,
      downImgData:{
        url:''
      },
      qrcodeList: qrcodeData.data
    }
  },
  created() {
  },
  methods: {
    // 生成二维码
    // qrcode() {
    //   console.log('jjjjjj')
    //   new QRCode('qrcode', {
    //     width: 200,
    //     height: 200, // 高度
    //     text: this.$openBASE_URL('img')+'pad/#/' // 二维码内容
    //   })
    //   new QRCode('studentPic_qrcode', {
    //     width: 200,
    //     height: 200, // 高度
    //     text: this.$openBASE_URL('img')+'program/#/studentPic' // 二维码内容
    //   })
    // },
    getQrcodeInfo() {
      // 此处需要区分 问卷 通知
      let self_ = this;
      systemIndex({}).then(response => {
        for(let item of qrcodeData.data){
          new QRCode(item.id, {
            width: 160,
            height: 160, // 高度
            text: `${response.vo.url}${item.text}`
          })
        }
        this.schooName = response.vo.name
        setTimeout(() => {
          self_.loading = false
        }, 600)
      })
    },
    getHtml2CanvasFn(option, title){
      let self_ = this
      let opts = {
        useCORS: true
      }
      self_.loading = true
      html2canvas(document.getElementById(option), opts).then(canvas => {
        let image = new Image()
        image.onload = function () {
          self_.downImgData.url = canvas.toDataURL('image/png')
          self_.downloadIamge(option, title)
        }
        image.src = canvas.toDataURL('image/png')
      }).catch(res=>{
        console.log('res:', res)
      })
    },
    downloadIamge(option, title) { // 下载图片地址和图片名
      let image = new Image()// 解决跨域 Canvas 污染问题
      let that = this
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        a.download = title // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
        that.loading = false
      }
      image.src = this.downImgData.url
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.latter-centent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.latter-body {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 20px #333;
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 90%;
}

.latter-header {
  height: 50px;
  line-height: 50px;
  display: flex;
  background: #2b2c48;
  color: #fff;
  width: 100%;
  font-size: 16px;
  font-weight: bold;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.latter-header span {
  display: block;
  width: 60px;
}

.latter-header span.latter-header-first {
  text-align: center;
  cursor: pointer;
}

.latter-header span.latter-header-first em {
  background: #fff;
  color: #333;
  font-style: normal;
  display: block;
  height: 30px;
  line-height: 30px;
  border-radius: 15px;
  margin-top: 10px;
  margin-left: 10px;
  font-size: 14px;
  box-shadow: 0 2px 4px #ef6f14;
}

.latter-header span.latter-header-first em:hover {
  text-decoration: underline;
}

.latter-header span.latter-header-last {
  font-size: 20px;
  text-align: center;
  cursor: pointer;
}

.latter-header .latter-header-title {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.letter-repeat-centent-footer {
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.letter-repeat-centent-footer span {
  display: block;
  height: 36px;
  width: 100px;
  border-radius: 4px;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
  background: #595c85;
  border: 1px solid #595c85;
  color: #fff;
  margin-right: 20px;
}

.code-box-line {
  flex: 1;
  padding: 30px 10px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  width: 100%;
}

.showbox-in-img {
  width: 33.3%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#qrcode {
  box-shadow: 0 0 2px #999;
  border: 8px solid #fff;
}

.qrcodeBox {
  box-shadow: 0 0 2px #999;
  border: 8px solid #fff;
}

.code-title {
  text-align: center;
  font-size: 20px;
  padding: 10px;
}

.closeBtn_letter {
  margin-right: 0;
}

.previewlogBody {
  box-shadow: 0 0 10px #9e9d9d;
  margin-right: 10px;
}
.previewlogBody:last-child {
  margin-right: 0;
}
.title-list span {
  display: block;
}

.title-list span:first-child {
  width: 100px;
}
.previewlogBody-outline{
  display: flex;
}
</style>

